<template>
  <div id="phone">
    <van-sticky style="background:#fff">
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">亲友手机号</div>
      </div>
    </van-sticky>
    <van-form ref="form">
      <van-field
          v-model.trim="mobile"
          name="手机号码"
          label="新手机号"
          placeholder="请输入手机号码"
          clearable
          :rules="[{ pattern, message: '请输入正确的手机号' }]"/>
      <van-field
          v-model.trim="smsCode"
          center
          clearable
          label="验证码"
          maxlength="6"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <van-button
              style="background:rgba(242, 150, 0, 1);border:none"
              size="small"
              type="info"
              @click="getSmsCode"
              :disabled="disabled"
          >
            {{ btnMsg }}
          </van-button>
        </template>
      </van-field>
      <div class="footer">
        <van-button class="size" @click="save">确 认</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import {checkSmsCode, familySmsCode} from "@/api/my";

export default {
  data() {
    return {
      pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
      back: require("@/assets/my/back.png"),
      mobile: "",
      smsCode: "",
      disabled: false,
      second: 60,
      btnMsg: "获取验证码",
    }
  },
  created() {

  },
  methods: {
    handleBack() {
      // this.$router.go(-1);
      this.$router.push({path: '/addFamilyFriend', query: {obj: this.$route.query.obj}})
    },
    // 获取验证码
    getSmsCode() {
      if (this.second != 60) {
        this.$toast.fail(`请于 ${this.second} 秒后重重新获取`);
        return;
      }
      var regExp = new RegExp("^1[3456789]\\d{9}$");
      if (regExp.test(this.mobile)) {
        familySmsCode(this.mobile).then((res) => {
          this.$toast.success("验证码发送成功");
          const _this = this;
          const timer = setInterval(() => {
            _this.second--;
            if (_this.second) {
              _this.disabled = true;
              _this.btnMsg = `倒计时 ${_this.second} 秒`;
            } else {
              _this.btnMsg = "获取验证码";
              _this.disabled = false;
              _this.second = 60;
              clearInterval(timer);
            }
          }, 1000);
        }).catch((e) => {
              console.log(e);
        });
      } else {
        this.$toast.fail("请输入正确的手机号");
      }
    },
    save() {
      if (this.mobile && this.smsCode) {
        let data = {
          code: this.smsCode,
          phone: this.mobile
        }
        checkSmsCode(data).then(res => {
          console.log('aaa', res)
          if (res.data) {
            this.$toast.success('验证成功')
            // this.$store.commit('my/UPDATE_PHONE', this.mobile)
            // this.$store.commit('my/UPDATE_AVATAR', res.data.avatar)
            // this.$store.commit('my/UPDATE_FRIEND_USER_ID', res.data.friendUserId)
            let params = {
              friendPhone: this.mobile,
              avatar: res.data.avatar,
              friendUserId: res.data.friendUserId
            }
            this.$router.push({path: '/addFamilyFriend', query: {obj: this.$route.query.obj, phoneParams: params}})
            // this.$router.back()
          } else {
            this.$toast.fail(`${res.msg}`)
          }
        })
      }

    }
  }
}
</script>

<style lang="less" scoped>
#phone {
  height: 100vh;
  padding: 0px 15px;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
      font-size: 20px;
      font-weight: 500;
    }

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .size {
      width: 141px;
      height: 38px;
      opacity: 1;
      border-radius: 19px;
      background: rgba(242, 150, 0, 1);
      font-size: 23px;
      font-weight: 500;
      line-height: 36px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
    }
  }
  /deep/.van-field__label {
    font-size: 17px;
  }
  /deep/.van-field__control {
   font-size: 17px;
  }
  /deep/.van-button--small {
    font-size: 15px;
  }

}
</style>